<template>
  <div id="index">
    <a-layout class="layout-demo">
      <a-layout-sider hide-trigger collapsible :collapsed="collapsed">
        <div class="logo" />
        <a-menu
          :defaultOpenKeys="['1']"
          :defaultSelectedKeys="['0_3']"
          :style="{ width: '100%' }"
        >
          <router-link to="/admin">
            <a-menu-item key="0_1">
              <IconHome />
              个人信息
            </a-menu-item>
          </router-link>
          <a-sub-menu key="1">
            <template #title>
              <span>
                <IconCalendar />
                官方信息管理
              </span>
            </template>
            <router-link to="/admin/createSystemInfo">
              <a-menu-item key="1_1">新建官方信息</a-menu-item>
            </router-link>
            <router-link to="/admin/systemInfo">
              <a-menu-item key="1_2">官方信息管理</a-menu-item>
            </router-link>
            <router-link to="/admin/handleClassInfo">
              <a-menu-item key="1_3">班级信息管理</a-menu-item>
            </router-link>
            <a-sub-menu key="2" title="身份申请管理">
              <router-link to="/admin/handleRoleAply">
                <a-menu-item key="2_1">用户身份申请管理</a-menu-item>
              </router-link>
              <router-link to="/admin/handleClassAply">
                <a-menu-item key="2_2">班级注册申请管理</a-menu-item>
              </router-link>
            </a-sub-menu>
          </a-sub-menu>
        </a-menu>
      </a-layout-sider>
      <a-layout>
        <a-layout-header style="padding-left: 20px">
          <a-button shape="round" @click="onCollapse">
            <IconCaretRight v-if="collapsed" />
            <IconCaretLeft v-else />
          </a-button>
        </a-layout-header>
        <a-layout style="padding: 0 24px">
          <a-breadcrumb :style="{ margin: '16px 0' }">
            <a-breadcrumb-item></a-breadcrumb-item>
          </a-breadcrumb>
          <a-layout-content><router-view></router-view></a-layout-content>
          <a-layout-footer>Footer</a-layout-footer>
        </a-layout>
      </a-layout>
    </a-layout>
  </div>
</template>
        <script>
import { defineComponent, ref } from "vue";
import {
  IconCaretRight,
  IconCaretLeft,
  IconHome,
  IconCalendar,
} from "@arco-design/web-vue/es/icon";

export default defineComponent({
  components: {
    IconCaretRight,
    IconCaretLeft,
    IconHome,
    IconCalendar,
  },
  setup() {
    const collapsed = ref(false);
    const onCollapse = () => {
      collapsed.value = !collapsed.value;
    };
    return {
      collapsed,
      onCollapse,
    };
  },
});
</script>
      
        <style scoped>
.layout-demo {
  height: 900px;
  background: var(--color-fill-2);
  border: 1px solid var(--color-border);
}
.layout-demo :deep(.arco-layout-sider) .logo {
  height: 32px;
  margin: 12px 8px;
  background: rgba(255, 255, 255, 0.2);
}
.layout-demo :deep(.arco-layout-sider-light) .logo {
  background: var(--color-fill-2);
}
.layout-demo :deep(.arco-layout-header) {
  height: 64px;
  line-height: 64px;
  background: var(--color-bg-3);
}
.layout-demo :deep(.arco-layout-footer) {
  height: 48px;
  color: var(--color-text-2);
  font-weight: 400;
  font-size: 14px;
  line-height: 48px;
}
.layout-demo :deep(.arco-layout-content) {
  color: var(--color-text-2);
  font-weight: 400;
  font-size: 14px;
  background: var(--color-bg-3);
}
.layout-demo :deep(.arco-layout-footer),
.layout-demo :deep(.arco-layout-content) {
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  color: var(--color-white);
  font-size: 16px;
  font-stretch: condensed;
  text-align: center;
}
</style>
        